<template>
    <div class="pay-sure" :style="style">
        <div class="sure-img">
            <img :src="payImg | imageFmt">
        </div>
        <div class="sure-tips">
            <div>官方提醒您</div>
            <div>您将消耗以下余额进行支付</div>
            <div class="money">{{payAmount | moneyFmt(2, '￥')}}</div>
        </div>
        <div class="confirm-btn">
            <div class="sure-btn" @click="confirmToPay">确认支付:{{payAmount | moneyFmt(2, '￥')}}</div>
        </div>
        <!--无支付密码，设置密码-->
        <confirm ref="confirm" :text="confirmText" confirmBtnText="设置" @confirm="setPass('6')"/>
        <!--输入密码-->
        <PassPop ref="paypass" :amount="payAmount | moneyFmt(2, '￥')" @finishPass="finishPass" @forget="setPass('5')"/>
        <!--密码输入错误-->
        <confirm ref="confirms" :text="confirmText" confirmBtnText="修改密码" cancelBtnText="重新输入" @confirm="setPass('5')"
                 @cancel="re_enter"/>
        <!--账号冻结-->
        <confirm ref="frozen" :text="confirmText" :isAlert="isFrozen" @confirm="frozen"/>
    </div>
</template>

<script>
    import Confirm from '../../components/common/confirm';
    import PassPop from '../../components/common/password-popup';
    import API from '../../request/api';
    import {commonMixin} from '@/common/mixin';

    const HEIGHT = document.documentElement.clientHeight + 'px';

    export default {
        name: 'pay-sure-balance',
        components: {Confirm, PassPop},
        mixins: [commonMixin],
        data() {
            return {
                style: {
                    height: HEIGHT
                },
                // payImg: 'logo-irysmall',
                payAmount: '',
                ticket: '',
                isPass: true,
                isFrozen: true,
                way: '',
                BtnText: '设置',
                confirmText: '您未设置支付密码，请先设置',
            };
        },
        computed: {
            payImg() {
                let system = this.$store.state.login.system;
                system = String(system).substring(0, 1);
                if (system == '3') {
                    return 'logo-babysmall';
                } else if (system == '2') {
                    return 'logo-qz';
                } else {
                    return 'logo-irysmall';
                }
            }
            // isPass(){ // 用户是否设置登录密码
            //     let pass = false;
            //     if(this.$store.state.userInfo.paypass) {
            //         pass = true
            //     }
            //     return pass
            // }
        },
        methods: {
            hasPaypass() {
                this.request.get(API.ExistsPayPass)
                    .then((res) => {
                        this.isPass = res.exists;
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            confirmToPay() {
                if (this.isPass) {
                    this.$refs.paypass.show(); // 弹出填写支付密码弹框
                } else {
                    this.$refs.confirm.show();// 弹出未设置支付密码弹框
                }
            },
            setPass(type) { // 去设置支付密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: type,
                        direct: 'pay-sure-balance',
                    }
                });
            },
            re_enter() {
                this.$refs.paypass.show(); // 弹出填写支付密码弹框
            },
            frozen() {
                this.$router.replace(this.redirect);
            },
            finishPass(pass) {
                this.showGlobaLoading(); //打开loading
                // 支付密码验证
                let postData = {
                    ticket_id: this.ticket_id,
                    pay_pass: pass,
                    way: this.way
                };
                this.request.post(API.PayPassConfirm, postData)
                    .then((result) => {
                        if (result.status === 'ok') {
                            this.$router.replace({
                                name: 'pay-success',
                                query: {
                                    ticket_id: this.ticket_id,
                                },
                            });

                        } else {
                            if (JSON.stringify(result.count)) {
                                if (result.count > 0) {
                                    // this.confirmText = '密码错误，您还可以输入'+result.count+'次'
                                    this.confirmText = result.msg;
                                    this.$refs.confirms.show(); // 弹出支付密码错误弹框
                                } else {
                                    this.BtnText = '确定';
                                    this.confirmText = result.msg;
                                    this.redirect = '/order-list-new?active=1';
                                    if (this.$store.state.online.createPayData.type == 3) {
                                        this.redirect = '/shopOrderList?active=1';
                                    }
                                    // this.confirmText = '账号已冻结，请三小时后重试，您还可以到待付款订单中使用其他方式支付';
                                    this.$refs.frozen.show();// 弹出账号已冻结弹框
                                }
                            } else {
                                this.BtnText = '确定';
                                this.confirmText = result.msg;
                                this.redirect = result.redirect;
                                this.$refs.frozen.show();// 弹出账号已冻结弹框
                            }
                        }
                        this.hideGlobaLoading(); //关闭loading
                    }).catch((err) => {
                    console.error('PayPassConfirm-err', err);
                });
            }
        },
        mounted() {
            let payData = this.$store.state.online.createPayData;
            this.ticket_id = payData.getWayData.ticket_id;
            this.payAmount = payData.total;
            if (window.__wxjs_environment === 'miniprogram') {
                this.way = 'wechat';
            }
            this.hasPaypass();
            if (this.$route.query.new_pass) { //忘记密码后返回弹出密码框
                this.$refs.paypass.show();
            }
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    .pay-sure {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;

        /* background-color grayF */

        .sure-img {
            margin-top: -30%;

            img {
                width: vw(86);
                height: vw(86);
            }
        }

        .sure-tips {
            margin-top: vw(40);
            word-vw(word14, gray3);
            line-height: vw(26);

            .money {
                margin-top: vw(10);
                word-vw(word20, main-color);
            }
        }

        .confirm-btn {
            width: 100%;
            height: vw(55);
            background: grayF;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .sure-btn {
            big-solid();
            height: vw(35);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
